<template>
    <div id="popup" ref="pop">
        <el-card>
            <h1>报告路况</h1>
            <div class="form">
                <el-form :model="form" label-width="70px">
                    <el-form-item label="事件编号">
                        <el-input v-model="form.num" disabled />
                    </el-form-item>
                    <el-form-item label="事件类型">
                        <el-select v-model="form.type">
                            <el-option label="刮擦" value="刮擦" />
                            <el-option label="碰撞" value="碰撞" />
                            <el-option label="失火" value="失火" />
                            <el-option label="翻车" value="翻车" />
                            <el-option label="其他" value="其他" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="事件等级">
                        <el-select v-model="form.grade">
                            <el-option label="1" value="1" />
                            <el-option label="2" value="2" />
                            <el-option label="3" value="3" />
                            <el-option label="4" value="4" />
                        </el-select>
                    </el-form-item>
                    <el-form-item label="发生时间">
                        <el-date-picker v-model="form.time" type="datetime" :default-time="defaultTime"
                            format="YYYY.MM.DD hh:mm" value-format="YYYY.MM.DD hh:mm" />
                    </el-form-item>
                    <el-form-item label="发生地点">
                        <el-input v-model="form.place" />
                    </el-form-item>
                    <el-form-item label="车牌号">
                        <el-input v-model="form.carnum" />
                    </el-form-item>
                    <el-form-item label="驾驶员">
                        <el-input v-model="form.driver" />
                    </el-form-item>
                    <el-form-item label="处理状态">
                        <el-select v-model="form.state" disabled>
                            <el-option label="待处理" value="0" />
                            <el-option label="处理中" value="1" />
                            <el-option label="已归档" value="2" />
                        </el-select>
                    </el-form-item>
                </el-form>
            </div>
            <div class="choose">
                <el-button type="primary" @click="add">提交</el-button>
                <el-button @click="del">取消</el-button>
            </div>
        </el-card>
    </div>
</template>
  
<script setup>
import { inject, onMounted, ref, watch, reactive } from "vue";
import { addReport } from "./hooks/addReport";
import { useMenuStore } from "../../store/index"

let $store = useMenuStore()
/* 获取当天日期 */
const getToday = () => {
    const date = new Date()
    let year = date.getFullYear()
    let month = date.getMonth() + 1
    let strDate = date.getDate()
    if (month < 10) {
        month = `0${month}`
    }
    if (strDate < 10) {
        strDate = `0${strDate}`
    }
    return `${year}${month}${strDate}`
}
let today = ref('')
/* 获取随机编号 */
let randomNum = ref('')
const form = reactive({
    num: '',
    type: '',
    grade: '',
    time: '',
    place: '',
    carnum: '',
    driver: '',
    state: '0',
})
const defaultTime = new Date(2000, 1, 1, 12, 0, 0)

let $map;
let position = ref();
const pop = ref();



// 创建画笔画布
const source = new ol.source.Vector({});

const layer = new ol.layer.Vector({
    source,
});
// 创建画笔
let draw = new ol.interaction.Draw({
    type: "Point",
    source,
});

watch(() => $store.activeIndex, val => {
    // console.log(val)
    if (val == "3-2") {
        /* 获取编号 */
        today.value = getToday()
        randomNum.value = Math.floor(Math.random() * 10000)
        form.num = 'sj' + today.value + randomNum.value
        $map.addInteraction(draw);
        // popup弹窗
        $map.on("click", function (e) {
            position.value = e.coordinate
            let center = e.coordinate; //经纬转像素
            let pixel = $map.getPixelFromCoordinate(center); //经纬度转屏幕坐标

            // 弹窗位置
            pop.value.style.left = pixel[0] + "px";
            pop.value.style.top = pixel[1] + "px";
            // 判定弹窗显隐
            if (pixel && $store.activeIndex == "3-2") {
                pop.value.style.display = "flex";
            } else {
                pop.value.style.display = "none";
            }
        });
    } else {
        $map.removeInteraction(draw);
    }
})
onMounted(() => {
    $map = inject("$map");
    // console.log($map);
    $map.addLayer(layer);

});
const add = () => {
    let attr = [
        { name: "事件编号", type: "string", value: form.num },
        { name: "事件类型", type: "string", value: form.type },
        { name: "事件等级", type: "number", value: form.grade },
        { name: "发生时间", type: "string", value: form.time },
        { name: "发生地点", type: "string", value: form.place },
        { name: "车牌号", type: "string", value: form.carnum },
        { name: "驾驶员", type: "string", value: form.driver },
        { name: "处理状态", type: "number", value: form.state },
    ];
    let service = {
        name: "guanggu",
        layerId: 2,
    };
    // 调用方法
    addReport(
        position,
        attr,
        service,
        // docLayer,
    );
    pop.value.style.display = "none";
    $map.removeLayer(layer);
};
// 清除画笔点击后的图标
const del = () => {
    pop.value.style.display = "none";
    $map.removeLayer(layer);
    $store.setIndex('4')
};

</script>
  
<style lang='scss' scoped>
#popup {
    height: 510px;
    position: fixed;
    z-index: 1000;
    top: 20px;
    left: 30px;
    background-color: #fff;
    border-radius: 5px;
    display: none;

    h1 {
        width: 100%;
        text-align: center;
        margin-bottom: 10px;
        font-size: larger;
        font-weight: 600;
    }

    .form {
        width: 100%;
        height: 400px;

    }
}

.choose {
    display: flex;
    justify-content: space-around;
    margin-bottom: 10px;
}
</style>